<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
<style type="text/css">
	.index_theLeft ul {
	    width: 100%;
	    padding: 0px;
	    margin: 0px;
	    overflow: auto;
	}
	.index_theLeft li {
	    list-style: none;
	    position: relative;
		padding: 15px 0 15px 20px;
	    border-bottom: 1px solid #f9f9f9;
	    cursor: pointer;
	}
	.returnlink {
		margin-right: 30px;
    	cursor: pointer;
    	color: #18bbfc;
	}
	.index_theLeft li.active , .index_theLeft li:HOVER{
			background: #f9f9f9 !important;
		color: #333 !important;
	}
	
	.index_theLeft li span,.index_theLeft li h5{
		text-align: center;
		color: #333;
	}
	.mapContainer{
		height: 550px;width:100%;padding-left:170px;
	}
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	.sceneList-info{
		margin-left: 0px;
/* 	    margin-right: 40px; */
	    padding-top: 10px;
	}
	h3{
		margin: 15px 0;
	}
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}
	.sensor_detail_title{
		padding: 15px 0;
	}
	.jui-echart{
		padding: 10px;
		border: 1px solid #dadada;
	}
	.detail-line{
		padding: 3px 0;
	}
	.span-btn{
		border: 1px solid #aaa;
    	padding: 1px 8px;
    	border-radius: 5px;
    	color:#666;
    	font-weight: 500 ;
    	margin-left: 2px;
    	cursor: pointer;
	}
	.span-btn.active {
		background: #aaa ;
		color: #fff;
	}
	.span-btn:HOVER{
		background: #aaa ;
		color: #fff;
	}
	#map {width: 100%;height: 300px;overflow: hidden;margin:0;font-family:"微软雅黑";}
	.tbody tr{
		cursor: pointer;
	}
	.dashboard-menu li{
		display: none ;
	}
	.BMap_cpyCtrl {
	    display: none;
	}
</style>
</head>
<body>
	<div>
		<!--  下方部位  -->
		<div style="background: #ecf0f5;">
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<ul class="dashboard-menu scoll">
					<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
						<li onclick="forwardUrl('/iot/sensors_detail?id=${obj.id}&sid=${sceneId}')"  
						 <c:if test="${obj.id == sensorId}">
						 	 class="active"
						 </c:if> 
						  nid="${obj.node_id }"
						  sid="${obj.id}">
	                       <span class="icon-codepen"></span>&nbsp;${obj.name }
	                    </li>
					</c:forEach>
				</ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
							
							<div class="pt-10 pl-5">
								<div class="clearfloat" style="position: relative;">
									<div class="clearfloat liner">
										<h4 class="pb-10" style="border-bottom: 2px solid #18bbfc">
											<span>传感器详情</span>
											<span class="float-right returnlink " onclick="returnBack()">返回  <span class="icon-sign-out"></span></span>
										</h4>
									</div>
									<!-- 操作栏  -->
									<div style="padding: 10px 0;" class=" jui-search_table"  config-option=" submit:'#searchbtns',
															 table:'#init-table',
															 param:{ scene_id: '$scene_id$',sensor_id:'$sensor_id$' },
															 before:'beforeCheck'" >
										<span class="ml-10">时间：</span>
										<input type-name="start_time" class="input input-self jui-time start_time" data-options="defaultValue:-1" >
										<span>~</span>
										<input type-name="end_time" class="input input-self jui-time end_time" >
										<span class="ml-10">查询间隔：</span>
										<select type-name="query_interval_type"  class="queryType input jui-selecter input-self input-select" >
											<option value=''>不设间隔</option>
											<option value='1'>30s</option>
											<option value='2'>1min</option>
											<option value='3'>30min</option>
											<option value='4'>60min</option>
										</select>
										<button  class="button ml-20 bg-iot float-right waydisplay"><span class="icon-cloud-download"></span> 路径显示</button>
										<button id="searchbtns" class="button ml-20 bg-iot float-right"><span class="icon-search"></span> 查询</button>
									</div>
									<!-- 地图  -->
									<div>
										<div id="map"></div>
									</div>
									
									<!-- 历史数据表格  -->
									<div style="margin-top:10px;">
										<div id="init-table" class="jui-table"  data-options=" url:'/page/sensor/history',
													param:{ scene_id: '$scene_id$',start_time:'$.start_time$',end_time:'$.end_time$',sensor_id:'$sensor_id$'  },
													columns:[
														{ name:'序号','type':'seq','value':'seq','width':'4%'}, 
														{ name:'传感器名称','value':'sensor_name','width':'10%'}, 
														{ name:'类型','value':'iot_sensor_type', type:'category' ,'width':'10%'}, 
														{ name:'数值','value':'sdata','width':'10%'},
														{ name:'时间','type':'time','value':'atime','width':'15%'}]" > 
										</div>
									</div> 
									
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

// 项目id 和 sensor_id
var scene_id = GetQueryString("sid") ;
var sensor_id = GetQueryString("id") ;

function beforeCheck(){
	if(DateUtil.compare(gic("start_time").val(),gic("end_time").val(),30*24*60*60*1000 )){
		return true ;
	}
	tip("查询时间不能超过一个月");
	return false ;
}


function returnBack(){
	forwardUrl("/iot/monitor?id=${sceneId}",1000);
}

var map   ;
$(function(){
	
	var nid =  $("li.active").attr("nid") ;
	$("li[nid*='"+nid+"']").show();
	
	map = new BMap.Map("map");    // 创建Map实例
// 	map.centerAndZoom('南京', 10);  // 初始化地图,设置中心点坐标和地图级别
	
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
	        BMAP_NORMAL_MAP,
	        BMAP_HYBRID_MAP
	    ]}));
	
	map.setMapStyle({
        styleJson: [{
            "featureType": "road",//道路
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        },
        {
            "featureType": "building",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        },
        {
            "featureType": "poilabel",//景点
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            } 
        },
        {
            "featureType": "manmade",//学院
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }
        ]
    });
	
	
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
	commonAjax('GET',localUrl+ '/sensor?id=' + sensor_id , "", function(data){
		if(isOK(data)){
			var tmp = data.data.str_sdata.split(",");
			selfLocation( tmp[0],tmp[1],"" ) ;
		}
	});
	
	// 地址设置标记点
	function selfLocation(lon,lat,obj , imgName ){
		//单独设定图标的样式
		var icon = new BMap.Icon( basePath + '/image/oss/iot/map/'+ gdv(imgName,'location.png') , new BMap.Size(32, 32), {
		   anchor: new BMap.Size(16, 32)
		});
		//创建一个图像标注实例。point参数指定了图像标注所在的地理位置
		var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
			icon: icon
		});
		
		mkr.addEventListener("click", function () {});
		mkr.addEventListener("mouseover", function (e) { });
		mkr.addEventListener("mouseout", function (e) { });
		//将覆盖物添加到地图中
		map.addOverlay(mkr);		
		//将地图的中心点更改为给定的点
		map.centerAndZoom(new BMap.Point(lon, lat), 10);
	}
	
	// 增加折线
	function addLine(lons){
		map.clearOverlays();
		var array = [] ;
		for(var i=0 ;  i < lons.length;i++ ){
			var tmp = lons[i] ;
			if(lons.length == 1  ){
				return ;
			}
			if( i == 0) {
				selfLocation(tmp["x"], tmp["y"],'',"start_g.png");
			}
			if( i == lons.length -1){
				selfLocation(tmp["x"], tmp["y"],'',"end_r.png");
			}
			// 放一些业务在js中进行处理
			if( i>0 ){
				if( tmp["x"] ==lons[i-1]["x"] &&  tmp["y"] == lons[i-1]["y"]  ){
					continue ;
				}
				
				if( tmp["x"] < 60 || tmp["x"] > 145 ||  tmp["y"] < 1 || tmp["y"] > 60    ){ 
					continue ;
				}
				
			}
			array.push( new BMap.Point(tmp["x"], tmp["y"] ));
		}
		console.log(array)
		var polyline = new BMap.Polyline( array , {strokeColor:"red", strokeWeight:3, strokeOpacity:0.8});   //创建折线
		map.addOverlay(polyline);   
	}
	
	$(".waydisplay").click(function(){
		commonAjax('POST',localUrl+ '/page/sensor/history?paged=1&pageSize=10000' , "{ scene_id: '$scene_id$',start_time:'$.start_time$',end_time:'$.end_time$',sensor_id:'$sensor_id$',query_interval_type:'$.queryType$' }", function(data){
			if(isOK(data)){
				var dataT = data.data.data ;
				var lon = [];
				var tmp ;
				for(var i=0;i<dataT.length;i++){
					tmp = dataT[dataT.length - 1 -i].sdata.split(",") ;
					if(tmp.length >1){
						lon.push({x:tmp[0],y:tmp[1]});						
					}
				}
				addLine(lon);
			}
		});
	})
	
	
	$(document).delegate(".tbody tr","click",function(){
		 var lat_lon =  $(this).children().eq(3).html().split(",");
		
		 map.clearOverlays(); 
		 selfLocation(lat_lon[0],lat_lon[1],'' );
	})
	
	
})
</script>
</html>